<template>
  <div class="pannel">
    <div class="pannel-head">
      <div class="pannel-head-title">{{ title }}</div>
      <div class="pannel-head-desc">
        {{ desc }}
      </div>
      <div class="pannel-head-actions">
        <slot name="action-items"> </slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "列表管理"
    },
    desc: {
      type: String,
      default: ""
    }
  }
};
</script>

<style lang="less" scoped>
.pannel {
  line-height: 48px;
  min-height: 48px;
  div {
    display: inline-block;
  }
  .pannel-head {
    float: left;
    min-height: 48px;
    width: 100%;
    border-bottom: solid 1px #e7eaec;
    div {
      display: inline-block;
    }
    .pannel-head-title {
      font-size: 20px;
      font-weight: bold;
      margin-right: 8px;
    }
    .pannel-head-desc {
      font-size: 12px;
      color: #9e9e9e;
    }
    .pannel-head-actions {
      height: 48px;
      float: right;
      .pannel-head-actions-item {
        display: inline-block;
      }
    }
  }
}
</style>
